<template>
  <div class="main">
    <!-- <u-navbar title="AI智能人岗匹配系统" bgColor="transparent" @leftClick="leftClick"></u-navbar> -->

    <!-- <div class="bgimg"> -->
      <img class="bg one" src="/static/di  tu er/di-tu-zuoshang.jpeg" alt=""/>
      <img class="bg two" src="/static/di  tu er/di-tu-shangzhong.jpeg" alt=""/>
      <img class="bg three2" src="/static/di  tu er/di-tu-youshang.jpeg" alt=""/>
      <img class="bg four" src="/static/di  tu er/di-tu-zuoxia.jpeg" alt=""/>
    <!-- </div> -->

    <div class="card">
      <div class="header">
        <div class="round">
          <u-icon name="checkbox-mark" color="#FFFFFF" size="88"></u-icon>
          <div class="ling"></div>
          <div class="ling"></div>
          <div class="ling"></div>
        </div>
        <div class="round_footer"></div>
        <div class="round_text">超级匹配出<span>{{ total > 100 ? `100 家以上`: `${total} 家` }}</span></div>
      </div>
      <div class="table">
        <div class="table">
          <div class="thead">
            <div class="th">招聘公司</div>
            <div class="th">招聘岗位</div>
            <div class="th">招聘人数</div>
            <div class="th">截至日期</div>
          </div>
          <scroll-view :scroll-y="true" class="tbody" @scrolltolower="scrolltolower">
            <div class="tr" v-for="item in listData" :key="item.id">
              <div class="td">**{{ item.companyName2.slice(-4) }}</div>
              <div class="td">**{{ item.position.slice(-5) }}</div>
              <div class="td">{{ item.numberOfRecruits }}</div>
              <div class="td">{{ item.recruitmentEndTime }}</div>
            </div>
          </scroll-view>
        </div>
      </div>
      <div v-if="!show" class="card_footer" @click="total > 4 && (show = true)">
        <img src="/static/images/yindao.png" alt="" class="icon"/>
      </div>
    </div>
    <div class="payBox">
      <div class="text"><span>￥</span>{{ payPrice }}</div>
      <div class="btns">
        <div class="left btn" @click="Modalshow = true">兑换</div>
        <div class="right btn" @click="payClick(false)">支付</div>
      </div>
    </div>
    <!-- <div class="footer">
      <div class="nav">
        <img class="icon" src="/static/images/pipeijilu.png" alt=""/>
        匹配记录
      </div>
      <div class="nav" @click="navTo">
        我的
        <img class="icon my" src="/static/images/youkuohao.png" alt=""/>
      </div>
    </div> -->
    <u-toast ref="uToast"></u-toast>
    <u-modal :show="Modalshow" title="兑换">
      <u--input placeholder="请输入内容" border="surround" v-model="ModalInput"></u--input>
      <template #confirmButton>
        <div class="modalBtns">
          <u-button type="primary" :plain="true" text="取消" @click="Modalshow = false"></u-button>
          <u-button type="primary" text="确定" @click="payClick(true, ModalInput)"></u-button>
        </div>
      </template>
    </u-modal>
  </div>
</template>

<script>
import {resumeList, pay, getPayStatus} from "@/api/detail/detail.js";

export default {
  data() {
    return {
      show: false,
      Modalshow: false,
      ModalInput: '',
      list: [],
      token: uni.getStorageSync("AccessToken"),
      flag: false,
      total: 0,
      pageNum: 1,
      payPrice: 0
    };
  },
  computed: {
    listData() {
      if (this.show) {
        this.flag = false;
        return this.list;
      }
      this.flag = true;
      return this.list.slice(0, 4);
    },
  },
  created() {
    const formData = uni.getStorageSync('formData')
    this.query = JSON.parse(formData);
    this.getList();
  },
  mounted() {
  },
  methods: {
    async getList(flag = false) {
      if (this.flag) return;
      this.flag = true;
      try {
        const params = {
          pageNum: this.pageNum,
          pageSize: 100,
        };
        for (let key in this.query) {
          if (this.query[key] !== '') {
            params[key] = this.query[key];
          }
        }
        params.householdRegistration = encodeURIComponent(params.householdRegistration)
        if (flag) {
          if (this.list.length >= this.total) return;
          params.pageNum++;
          const {data} = await resumeList(params);
          this.list = [...this.list, ...data.dataTable.rows];
        } else {
          const {data} = await resumeList(params);
          this.total = data.dataTable.total;
          this.list = data.dataTable.rows;
          this.payPrice = data.payPrice
          this.pageNum++;
        }
        this.flag = false;
      } catch (err) {
        this.flag = false;
      }
    },
    scrolltolower() {
      // this.getList(true);
    },
    leftClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    navTo() {
      uni.switchTab({
        url: "/pages/center/index",
        fail(err) {
          console.log(err);
        },
      });
    },
    async payClick(flag = false, str = '') {
      const payObj = {
        ...this.query
      }
      if (flag) {
        if (!str.trim()) {
          return
        }
        payObj['redemptionCode'] = str
        this.Modalshow = false;
        this.ModalInput = ''
      }
      const res = await pay(payObj);

      if (flag) {
        if (res.msg === '兑换码支付成功') {
          return uni.navigateTo({
            url: '/pagesPay/index'
          })
        } else {
          return;
        }
      }

      const orderInfo = {
        ...res.data
      };

      const {orderId} = res.data
      const payStateMap = {
        1: "待支付",
        2: "支付成功",
        3: "支付失败",
        4: "已发货",
        5: "已完成",
        6: "已取消"
      }
      WeixinJSBridge.invoke('getBrandWCPayRequest', orderInfo,
          async (res) => {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              const {data: {payStatus}} = await getPayStatus({orderId})
              this.$refs.uToast.show({
                type: 'default',
                message: payStateMap[payStatus],
                complete() {
                  uni.navigateTo({
                    url: '/pagesPay/index'
                  })
                }
              })
            } else {
              this.$refs.uToast.show({
                type: 'default',
                message: '支付失败'
              })
            }
          }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  height: 100vh;
  max-width: 100vw;
  padding: 0 32rpx;
  padding-top: 15vh;
  box-sizing: border-box;
  overflow: hidden;

  // .bgimg {
  //   position: fixed;
  //   z-index: 5;
  //   top: 0;
  //   left: 0;
  //   height: 100%;

    .bg {
      position: absolute;
      width: 100rpx;
      overflow: hidden;

      &.one {
        height: 200rpx;
        left: 0;
        top: 0;
      }

      &.two {
        width: 240rpx;
        height: 100rpx;
        left: 26vw;
        top: 0;
      }

      &.three2 {
        width: 180rpx;
        height: 300rpx;
        right: 0rpx;
        top: 0rpx;
      }

      &.four {
        width: 400rpx;
        height: 300rpx;
        left: 0;
        bottom: 0;
      }
    // }
  }

  .card {
    background: rgba(238, 239, 248, 0.25);
    box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    border-radius: 16rpx;
    padding: 160rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 16rpx;
    position: relative;
    z-index: 6;

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -200rpx;
      flex-direction: column;

      .round {
        position: relative;
        width: 260rpx;
        height: 260rpx;
        background: #7669f9;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        .ling {
          background: #6561e6;
          position: absolute;
          right: 80rpx;
          top: -30rpx;
          width: 10rpx;
          height: 30rpx;
          border-radius: 40rpx;
          transform: rotate(0deg);

          &:nth-child(2) {
            right: 50rpx;
            top: -20rpx;
            transform: rotate(25deg);
          }

          &:nth-child(3) {
            right: 20rpx;
            top: 0rpx;
            transform: rotate(65deg);
          }
        }
      }

      .round_footer {
        width: 180rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #7669f9;
        margin-top: 10rpx;
      }

      .round_text {
        font-size: 55rpx;
        color: #7669f9;
        font-weight: 600;
        margin-top: 30rpx;

        span {
          color: #46a7c5;
        }
      }
    }

    .table {
      width: 100%;
      margin-top: 20rpx;

      .table {
        width: 100%;

        .thead {
          font-size: 30rpx;
          color: #7669f9;
          padding: 5rpx;
          display: flex;
          border: none;
          border-bottom: 1rpx dotted #c8ccd2;

          .th {
            padding-bottom: 12rpx;
            flex: 1;
            text-align: center;
          }
        }

        .tbody {
          max-height: 400rpx;
          overflow-y: auto;
          font-size: 26rpx;

          .tr {
            display: flex;
            padding: 12rpx 0;
            border-bottom: 1rpx dotted #c8ccd2;

            .td {
              flex: 1;
              text-align: center;
              white-space: nowrap;
            }
          }
        }
      }
    }

    .card_footer {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }

  .payBox {
    background: rgba(238, 239, 248, 0.25);
    box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    border-radius: 16rpx;
    padding: 12rpx 32rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 6;

    .text {
      font-weight: 600;
      font-size: 48rpx;
	  min-width: 40%;

      span {
        color: #838383;
      }
    }

    .btns {
      display: flex;
      position: absolute;
      right: 0;
      top: 0;

      .btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        padding: 24rpx 48rpx;
        font-weight: 600;

        &.right {
          clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
          background-color: #7665f9;
          border-radius: 0 24rpx 24rpx 0;
          margin-left: -30rpx;
        }

        &.left {
          clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
          background-color: #46a7c5;
          border-radius: 24rpx 0 0 24rpx;
        }
      }
    }
  }

  .footer {
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    padding: 56rpx 56rpx;

    .nav {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      color: #6d6e6f;

      .icon {
        width: 60rpx;
        height: 60rpx;

        &.my {
          margin-left: -20rpx;
        }
      }
    }
  }
}

.modalBtns {
  display: flex;
  gap: 12rpx;
}
</style>
